<template>
  <div class="nav-header">
    <a-popover placement="bottom">
      <template #content>
        <div class="menu">
          <div>我的资料</div>
          <div>退出</div>
        </div>
      </template>

      <a-avatar class="avatar" style="background-color: #87d068">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
    </a-popover>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return {}
  }
})
</script>
<style scoped lang="less">
.nav-header {
  height: 100%;
  width: 100%;

  background-color: #fff;
  padding-top: 12px;
  padding-right: 50px;

  display: flex;
  justify-content: flex-end;
}

.avatar {
  cursor: pointer;
}

.menu div {
  cursor: pointer;
  padding: 5px;
}
</style>
